<template>
	<view style="background-color: #F7F7F9;">

		<view :class="item.actplatform== 1?'mt':'elm'"
			style="height: 200rpx;width: 750rpx;border-bottom-left-radius: 35rpx;border-bottom-right-radius: 35rpx;">
			<!-- <view class="flex j-b a-c f28 cff" style="padding-left: 50rpx;padding-right: 50rpx;padding-top: 25rpx;"> -->
			<!-- 				<text>同城电话</text>
				<text>一键直连</text>
				<text>服务品质</text> -->
			<!-- </view> -->
		</view>
		<view class="p20" style="margin-top: -120rpx;">
			<view class=" p20" style="background-color: #fff;border-radius: 35rpx;">
				<view class=" flex">
					<view class="" style="width: 150rpx;height: 150rpx;">
						<image style="height: 150rpx;width: 150rpx;" class="b_y" :src="item.pic"></image>
					</view>
					<view class="l50 ml2">
						<view class="flex j-b" style="width: 530rpx;">
							<text class="m_20 shop-list-name f34">{{item.name}}</text>
						</view>
						<view class="flex j-b pt1" style="width: 530rpx;">
							<text class="f26 m_20 c7">活动时间:{{item.beginTime}}-{{item.endTime}}</text>
						</view>
						<view class="flex j-b pt1" style="width: 530rpx;">
							<text class="f26 m_20 c7">{{item.fullAddress}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="p20" style="margin-top: 0;">
			<view class="p20 ss" :style="item.actplatform== 1?'color:#FDC400;':'color:#0192FF;'">
				当天报名只能在当天活动时间内下单。<br />
				20:00前报名的活动，需在21:00前提交凭证，21:00后或次日提交会扣除2片花瓣。<br />
				20:00后报名的活动，需在次日21:00前提交凭证。<br />
				次日21:00后将关闭订单，无法获得佣金。<br />
			</view>
		</view>
		<view class="" style="position: -webkit-sticky; position: sticky;top: 0px;background-color: #fff;z-index: 10;">
			
			<view class="p20 flex a-c" style="background-color: #fff;">
				<view @click="ontab(0)" :class="item.actplatform== 1? 'isxz' : 'iswxz'" class="ml20 ">
					<text class="f34">活动流程</text>
				</view>
			</view>
		</view>
		<view class="hengxian" style="height: 5rpx;"></view>
		<view style="background-color: #fff;">
			<view class="fls" v-for="(items,index) in setp">
				<view style="display: flex;align-items: center;">
					<view class="num" :style="item.actplatform== 1?'color:#FDC400;':'color:#0192FF;'">
						{{items.id}}
					</view>
					<view class="name">{{items.name}}</view>
				</view>
				<view style="flex: 1;margin-left: 40rpx;">{{items.text}}</view>
			</view>
		</view>
		<view class="" style="height: 130rpx;"></view>
		<view class="dibu" style="height: 140rpx;">
			<view class="p10  flex ">
				<view class="flex j-s p10" style="width: 100%;">
					<view @click="on_url(item)" class="flex a-c j-c b_y f800 f28 cff"
						style="width:300rpx;height: 100rpx;color:#000;border: 1rpx solid #000;">
						<text>进店下单</text>
					</view>
					<view @click="on_tel()" class="flex a-c j-c b_y f800 f28 cff sse"
						:style="item.actplatform== 1?'background-color:#FDC400;':'background-color:#0192FF;'">
						<text>立即报名</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				item: {},
				setp: [{
						id: '01',
						name: '活动报名',
						text: '点击‘立即报名’,支付费用。'
					},
					{
						id: '02',
						name: '前往店铺',
						text: '报名成功后前往商家店铺下单。'
					},
					{
						id: '03',
						name: '上传凭证',
						text: '参考示例上传凭证。'
					},
					{
						id: '04',
						name: '订单审核',
						text: '等待审核,审核成功后返现到账。'
					},
				],
				tabIndex: 0,
			}
		},
		onShareAppMessage(res) {
			return {
				title: this.find.shop_name,
				path: '/pages/ban_tongchengshop/shop_view?id=' + this.id,
				imageUrl: this.find.shop_img,
			}
		},

		onShareTimeline(res) {
			return {
				title: this.find.shop_name,
				path: '/pages/ban_tongchengshop/shop_view?id=' + this.id,
				imageUrl: this.find.shop_img,
			}
		},
		onLoad(options) {
			this.item = JSON.parse(options.item)
			console.log(this.item)
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: this.item.actplatform == 1 ? '#FDC400' : '#0192FF',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			// 支付前调用 查询信息
			payment_front(e, id) {
				var that = this;
				let data = {
					data
				}
				let requestParams = {
					businessId: this.item.userId,
					description: '用户充值',
					total: e, //e.充值金额
					platform: this.item.actplatform,
					orderId: id ,//订单id
				};
				this.$module.sm(requestParams, 1, res => {
					data.data = res
				})
				this.Htpp.post('/mehrb/wxpay/payment', 'app', {
					datalist: data
				}).then(ret => {
					that.$module.sm(ret, 2, res => {
						res.data.package = res.data.packageVal
						res.data.timeStamp = res.data.timestamp
						that.Payments(res.data)
					})
				})
			},
			on_sc() {
				var that = this;
				that.$module.showLoading('报名中...')
				let data = {
					data
				}
				let requestParams = {
					consumerId: uni.getStorageSync('user').id,
					businessId: this.item.userId,
					platform: this.item.actplatform,
					activityId: this.item.activityId
				};
				this.$module.sm(requestParams, 1, res => {
					data.data = res
				})
				this.Htpp.post('/mehrb/meplus/order/save', 'app', {
					datalist: data
				}).then(ret => {
					that.$module.sm(ret, 2, res => {
						if (res.code == 0) {
							that.$module.showToast('报名成功')
							setTimeout(that.$module.switchTab('/pages/index/index'), 2000)
						} else if (res.code == 60000) {
							uni.showModal({
								title: '余额不足以支付本次活动，还应充值'+uni.getStorageSync('publis').money+'元',
								content: '是否前去充值?',
								cancelText: "取消", // 取消按钮的文字  
								confirmText: "是", // 确认按钮的文字  
								success: function(ret) {
									that.$module.showLoading('充值中...')
									if (ret.confirm) {
										that.payment_front(uni.getStorageSync('publis').money,res.data)
									} else {
										uni.hideLoading()
									}
								}
							});
						}
					})
				})
			},
			Payments(data) {
				const that = this
				this.$module.Payment(data, res => {
					if (res == 1) {
						that.$module.showToast('报名成功')
						setTimeout(that.$module.switchTab('/pages/index/index'), 1600)
					}
				})
			},
			on_tel() {
				const that = this
				that.$module.ifTokens(ret => {
					if (ret == 1) {
						that.$module.navigateTo('/pages/banmi/user_login')
					} else if (ret == 2) {
						this.$module.subScribeMsg(0)//订阅消息
						uni.showModal({
							title: '温馨提示',
							content: '1.本次活动花费' + uni.getStorageSync('publis').money + '花瓣',
							success: function(res) {
								if (res.confirm) {
									that.on_sc()
								} else {
									uni.hideLoading()
								}
							}
						});
					}
				})
			},
			on_url(item) { //跳转美团&饿了吗小程序
				let link=''
				// 跳转至饿了么
				if (item.actplatform == 2) {
					link = item.elem
				} else if (item.actplatform ==1) {
					link = item.meituan
				}
				uni.navigateToMiniProgram({
					shortLink:link,
					envVersion: "release",
					success: res => {
						// 打开成功
						console.log("打开成功", res);
					},
					fail: err => {
						console.log(err);
					}
				})

			},
			ontab(index) {
				this.tabIndex = index;
			},
		}
	}
</script>

<style lang="less" scoped>
	.ss{
		background-color: #fff;
		font-size: 26rpx;
		border-radius: 10rpx;
	}
	.fls {
		margin: 20rpx;
		display: flex;
		padding: 20rpx 10rpx;
		justify-content: space-between;
		align-items: center;

		.num {
			font-style: italic;
			font-size: 50rpx;
			font-weight: bold;
		}

		.name {
			margin-left: 20rpx;
			font-size: 30rpx;
		}
	}

	.fk_img {
		margin-right: -10rpx;
	}

	.dibu {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		height: 120rpx;
		width: 100%;
		border-top: solid 1rpx #f2f2f2;
	}

	.isxz {
		border-bottom: solid 8rpx #FDC400;
		height: 45rpx;
		font-weight: 800;
		padding-bottom: 20rpx;
	}

	.iswxz {
		border-bottom: solid 8rpx #0192FF;
		height: 45rpx;
		font-weight: 800;
		padding-bottom: 20rpx;
	}

	.mt {
		background-color: #FDC400;
	}

	.elm {
		background-color: #0192FF;
	}

	.sse {
		width: 300rpx;
		margin-left: 20rpx;
		height: 100rpx;
	}
</style>